<template>
  <div class="notice-block-setting setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">公告图标</div>
        <div class="content">
          <el-form-item label="公告样式">
            <el-radio-group v-model="settingData.data.mode">
              <el-radio :label="1">系统图标</el-radio>
              <el-radio :label="2">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="settingData.data.mode == 1" label="公告图">
            <div class="sa-flex">
              <sa-image
                class="notice"
                :class="[
                  'notice-' + (nlindex + 1),
                  settingData.data.src == nl ? 'notice--active' : '',
                ]"
                v-for="(nl, nlindex) in noticeList"
                :key="nl"
                :url="nl"
                @click="settingData.data.src = nl"
              ></sa-image>
            </div>
          </el-form-item>
          <el-form-item v-if="settingData.data.mode == 2" label="图片">
            <div class="sa-flex">
              <sa-uploader v-model="settingData.data.src" fileType="image"></sa-uploader>
              <div class="tip">建议尺寸：24*24</div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="card">
        <div class="title">内容设置</div>
        <div class="content">
          <el-form-item label="公告内容">
            <dc-text-color
              v-model="settingData.data.title"
              placeholder="请输入公告内容"
            ></dc-text-color>
          </el-form-item>
          <el-form-item label="链接">
            <dc-url v-model="settingData.data.url"></dc-url>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcTextColor from '../../common/dc-text-color.vue';

  const props = defineProps(['settingData', 'tabType']);

  const noticeList = [
    checkUrl('/static/img/shop/decorate/notice-1.png'),
    checkUrl('/static/img/shop/decorate/notice-2.png'),
    checkUrl('/static/img/shop/decorate/notice-3.png'),
  ];
</script>

<style lang="scss" scoped>
  .notice-block-setting {
    .notice {
      margin-right: 12px;
      border: 1px solid var(--sa-border);
      border-radius: 4px;
      &--active {
        border-color: var(--el-color-primary);
      }
    }
    .notice-1 {
      width: 72px;
      height: 30px;
    }
    .notice-2 {
      width: 46px;
      height: 30px;
    }
    .notice-3 {
      width: 34px;
      height: 30px;
    }
  }
</style>
